<template>
    <div>
        <div class="rm">
            <ul>
                <li>
                    <img src="../../../assets/imges/比亚迪.jpg" alt="">
                    <img src="../../../assets/imges/特斯拉.jpg" alt="">
                    <img src="../../../assets/imges/大众.jpg" alt="">
                    <img src="../../../assets/imges/五菱宏光.jpg" alt="">
                    <img src="../../../assets/imges/蔚来.jpg" alt="">
                </li>
                <li>
                    <span>比亚迪</span>
                    <span>特斯拉</span>
                    <span>大众</span>
                    <span>五菱宏光</span>
                    <span class="wl">蔚来</span>
                </li>
                <li>
                    <span>价格</span>
                    <span>5万以下</span>
                    <span>5-8万</span>
                    <span>12-18万</span>
                    <span>18万以上</span>
                </li>
                <li>
                    <span>续航</span>
                    <span>200-300</span>
                    <span>300-400</span>
                    <span>400-500</span>
                    <span>500以上</span>
                </li>
                <li>
                    <span>类别</span>
                    <span>纯电动</span>
                    <span>插电混动</span>
                    <span>SUV</span>
                    <span>自主品牌</span>
                </li>
            </ul>
        </div>

        <van-index-bar>
            <van-index-anchor index="A" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="B" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="C" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="D" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="E" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>


            <van-index-anchor index="F" />
            <ul class="ul2">
                <li>
                    <div class="left">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        <span>奥迪</span>
                    </div>
                    <span>43款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        <span>埃安</span>
                    </div>
                    <span>14款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        <span>AITO</span>
                    </div>
                    <span>3款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/大众2.jpg" alt="">
                        <span>大众</span>
                    </div>
                    <span>6款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/哈弗.jpg" alt="">
                        <span>哈弗</span>
                    </div>
                    <span>13款</span>
                </li>

                <li>
                    <div class="left">
                        <img src="../../../assets/imges/比亚迪2.jpg" alt="">
                        <span>比亚迪</span>
                    </div>
                    <span>21款</span>
                </li>
            </ul>
        </van-index-bar>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div {
    font-size: 32px;

    .rm {
        width: 93%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;
        line-height: 50px;
        ul {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    width: 120px;
                }

                .wl {
                    margin-right: 12px;
                }
            }
        }
    }

    .ul2 {
        width: 94%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 100px;
            .left {
                display: flex;
                align-items: center;

                img {
                    width: 90px;
                }
            }
        }
    }
}
</style>